<script setup lang="ts">
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { PureTableBar } from "@/components/RePureTableBar";
import { useWatch } from "./hook";
import { ref } from "vue";
import type { FormInstance } from "element-plus";
import { Plus } from "@element-plus/icons-vue";

import Search from "@iconify-icons/ep/search";
import Refresh from "@iconify-icons/ep/refresh";
import AddFill from "@iconify-icons/ri/add-circle-line";
import Delete from "@iconify-icons/ep/delete";
import EditPen from "@iconify-icons/ep/edit-pen";
import ViewIco from "@iconify-icons/ep/view";
import EnableIco from "@iconify-icons/ep/check";

defineOptions({
  name: "SysConfigList"
});
const tableRef = ref();
const ruleFormRef = ref<FormInstance>();
const pwdFormRef = ref<FormInstance>();
const {
  columns,
  onSearch,
  searchform,
  tabledata,
  getPageData,
  handleUpdate,
  handleDelete,
  handleSelectionChange,
  handleBatchDelete,
  handleBatchEnable,
  cmpglobal,
  dialogtitle,
  addorupdataform,
  addClick,
  resetSearchForm,
  resetAddOrUpdataForm,
  rules,
  submitForm,
  pagination,
  onSizeChange,
  onCurrentChange,
  clickSearch,
  handleView,
  dialogClose,
  handleEnable,
  ifDisabledForm,
  ifDisabledFormResetBut,
  getRole,
  isshowpwd,
  isshowwxid,
  pwdUpdate,
  updatapwdform,
  pwdrules,
  uppwdsubmitForm,
  uploadFile,
  beforeAvatarUpload,
  handleAvatarError,
  handleAvatarSuccess
} = useWatch();

getPageData();
getRole();
</script>

<template>
  <div class="main">
    <el-form
      :model="searchform"
      :inline="true"
      class="bg-bg_color w-[99/100] pl-8 pt-4"
    >
      <el-form-item label="用户名">
        <el-input placeholder="请输入用户名" v-model="searchform.name" />
      </el-form-item>
      <el-form-item label="手机">
        <el-input placeholder="请输入手机" v-model="searchform.phone" />
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input placeholder="请输入邮箱" v-model="searchform.email" />
      </el-form-item>
      <el-form-item label="状态">
        <el-select
          placeholder="请选择状态"
          clearable
          v-model="searchform.ifdisable"
        >
          <el-option label="启用" value="1" />
          <el-option label="禁用" value="0" />
          <el-option label="全部" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          :icon="useRenderIcon(Search)"
          @click="clickSearch"
        >
          搜索
        </el-button>
        <el-button :icon="useRenderIcon(Refresh)" @click="resetSearchForm">
          重置
        </el-button>
      </el-form-item>
    </el-form>
    <PureTableBar
      :title="cmpglobal.tableTitle"
      @refresh="onSearch"
      :tableRef="tableRef?.getTableRef()"
    >
      <template #buttons>
        <el-button
          type="primary"
          :icon="useRenderIcon(AddFill)"
          @click="addClick(ruleFormRef)"
        >
          新增
        </el-button>
        <el-popconfirm title="是否确认禁用?" @confirm="handleBatchDelete">
          <template #reference>
            <el-button type="primary" :icon="useRenderIcon(Delete)">
              批量禁用
            </el-button>
          </template>
        </el-popconfirm>
        <el-popconfirm title="是否确认启用?" @confirm="handleBatchEnable">
          <template #reference>
            <el-button type="primary" :icon="useRenderIcon(EnableIco)">
              批量启用
            </el-button>
          </template>
        </el-popconfirm>
      </template>
      <template v-slot="{ size, checkList }">
        <pure-table
          :data="tabledata.data"
          :columns="columns"
          border
          :checkList="checkList"
          :size="size"
          row-key="id"
          @selection-change="handleSelectionChange"
          ref="tableRef"
          :pagination="pagination"
          @page-size-change="onSizeChange"
          @page-current-change="onCurrentChange"
          ><template #operationpwd="{ row }">
            <el-button
              class="reset-margin"
              link
              type="primary"
              :size="size"
              @click="pwdUpdate(row)"
              :icon="useRenderIcon(EditPen)"
            >
              修改密码
            </el-button>
          </template>
          <template #operation="{ row }">
            <el-button
              class="reset-margin"
              link
              type="info"
              :size="size"
              @click="handleView(row)"
              :icon="useRenderIcon(ViewIco)"
            >
              查看
            </el-button>
            <el-button
              class="reset-margin"
              link
              type="primary"
              :size="size"
              @click="handleUpdate(row)"
              :icon="useRenderIcon(EditPen)"
            >
              修改
            </el-button>
            <span v-show="row.ifdisable === 1 ? true : false">
              <el-popconfirm title="是否确认禁用?" @confirm="handleDelete(row)">
                <template #reference>
                  <el-button
                    class="reset-margin"
                    link
                    type="primary"
                    :size="size"
                    :icon="useRenderIcon(Delete)"
                  >
                    禁用
                  </el-button>
                </template>
              </el-popconfirm>
            </span>
            <span v-show="row.ifdisable === 0 ? true : false"
              ><el-popconfirm
                title="是否确认启用?"
                @confirm="handleEnable(row)"
              >
                <template #reference>
                  <el-button
                    class="reset-margin"
                    link
                    type="primary"
                    :size="size"
                    :icon="useRenderIcon(EnableIco)"
                  >
                    启用
                  </el-button>
                </template>
              </el-popconfirm></span
            >
          </template></pure-table
        ></template
      >
    </PureTableBar>
    <el-dialog
      v-model="cmpglobal.dialogVisible"
      :title="dialogtitle"
      width="50%"
      @close="dialogClose"
    >
      <el-form
        :model="addorupdataform"
        label-width="120px"
        :rules="rules"
        ref="ruleFormRef"
      >
        <el-form-item label="用户名" prop="name">
          <el-col :span="8">
            <el-input
              placeholder="请输入用户名"
              v-model="addorupdataform.name"
              :disabled="ifDisabledForm"
            />
          </el-col>
        </el-form-item>
        <span v-show="isshowpwd"
          ><el-form-item label="密码" prop="password">
            <el-col :span="8">
              <el-input
                placeholder="请输入密码"
                v-model="addorupdataform.password"
                :disabled="ifDisabledForm"
              />
            </el-col> </el-form-item
        ></span>
        <el-form-item label="头像">
          <el-upload
            class="avatar-uploader"
            action=""
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :on-error="handleAvatarError"
            :before-upload="beforeAvatarUpload"
            :http-request="uploadFile"
            v-model="addorupdataform.photo"
            :disabled="ifDisabledForm"
          >
            <img
              v-if="addorupdataform.phone"
              :src="addorupdataform.imageUrl"
              class="avatar"
            />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="手机号码" prop="phone">
          <el-col :span="8">
            <el-input
              placeholder="请输入手机号码"
              v-model="addorupdataform.phone"
              :disabled="ifDisabledForm"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-col :span="8">
            <el-input
              placeholder="请输入邮箱"
              v-model="addorupdataform.email"
              :disabled="ifDisabledForm"
            />
          </el-col>
        </el-form-item>
        <span v-show="isshowwxid"
          ><el-form-item label="wxid">
            <el-col :span="8">
              <el-input
                placeholder="wxid"
                v-model="addorupdataform.wxid"
                :disabled="true"
              />
            </el-col> </el-form-item
        ></span>
        <el-form-item label="角色" prop="roleid">
          <el-col :span="8">
            <el-select
              v-model="addorupdataform.roleid"
              class="m-2"
              placeholder="请选择角色"
              size="large"
              :disabled="ifDisabledForm"
            >
              <el-option
                v-for="item in cmpglobal.roleSelectData"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="submitForm(ruleFormRef)"
            :disabled="ifDisabledForm"
            >保存</el-button
          >
          <el-button
            type="primary"
            @click="resetAddOrUpdataForm(ruleFormRef)"
            :disabled="ifDisabledFormResetBut"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cmpglobal.dialogVisible = false"
            >关闭对话框</el-button
          >
        </span>
      </template>
    </el-dialog>
    <el-dialog
      v-model="cmpglobal.pwdDialogVisible"
      title="修改密码"
      width="30%"
    >
      <el-form
        :model="updatapwdform"
        label-width="120px"
        :rules="pwdrules"
        ref="pwdFormRef"
      >
        <el-form-item label="用户名">
          <el-col :span="12">
            <el-input v-model="updatapwdform.name" :disabled="true" />
          </el-col>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-col :span="12">
            <el-input
              placeholder="请输入密码"
              v-model="updatapwdform.password"
            />
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="uppwdsubmitForm(pwdFormRef)"
            >保存</el-button
          >
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cmpglobal.pwdDialogVisible = false"
            >关闭对话框</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
